<template>
  <el-button @click="openDialog">打开语音播报弹窗</el-button>

  <el-dialog
      v-model="dialogVisible"
      title="语音播报"
      @open="startSpeech"
      @close="stopSpeech"
  >
    <p>{{ message }}</p>
<!--    <span slot="footer" class="dialog-footer">-->
<!--      <el-button @click="dialogVisible = false">关闭</el-button>-->
<!--    </span>-->
  </el-dialog>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue';
const dialogVisible = ref(false);
const message = ref('这是一个带有语音播报功能的弹窗');

let speechSynthesisUtterance: SpeechSynthesisUtterance;

const startSpeech = () => {
  if (!speechSynthesisUtterance) {
    speechSynthesisUtterance = new SpeechSynthesisUtterance(message.value);
    speechSynthesisUtterance.lang = 'zh-CN'; // 设置语言
    speechSynthesisUtterance.rate = 1; // 设置语速
  }
  window.speechSynthesis.speak(speechSynthesisUtterance);
};

const stopSpeech = () => {
  window.speechSynthesis.cancel();
};

const openDialog = () => {
  console.log('打开弹窗');
  dialogVisible.value = true;
}
</script>
